<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客房商品管理</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 总体宽度样式 -->
    <style>
        #app {
            width: 1024px;
            margin: 0 auto;
        }
    </style>
    <!-- 卡片样式 -->
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 200px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div id="app">


        <!-- 显示卡片 -->
        <el-row :gutter="30">
            <el-col :span="6" v-for="roomId in roomIdList " :key="roomId">
                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>房号 {{roomId}}</span><!-- 卡片名称 :具体房号-->

                    </div>

                    <el-button type="text" @click="showTable(roomId)">商品清单</el-button>
                </el-card>
            </el-col>
        </el-row>


        <!-- 弹出商品管理对话框 -->
        <el-dialog title="商品管理" :visible.sync="dialogTableVisible">

            <el-row :gutter="20">
                <el-col :span="6">
                    <h3>商品清单</h3>
                </el-col>
                <el-col :span="6" :offset="12">
                    <el-button type="primary" icon="el-icon-plus" round @click="dialogAddCommodityFormVisible = true">
                        添加商品
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="commodityListData">
                <el-table-column property="commName" label="名称" width="180"></el-table-column>
                <el-table-column property="commPrice" label="价格" width="180"></el-table-column>
                <el-table-column property="commNum" label="数量" width="180"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteCommodity(scope.$index)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>



        <!-- 添加商品所需的表单对话框，初始是隐藏的 -->
        <el-dialog title="添加新的商品" :visible.sync="dialogAddCommodityFormVisible" width="25%">
            <el-form ref="addCommodityInfo" :model="addCommodityInfo" label-width="95px">
                <el-form-item label="名称">
                    <el-input v-model="addCommodityInfo.commName"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="addCommodityInfo.commPrice"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="addCommodityInfo.commNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddCommodityFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addCommodity">添加</el-button>
            </div>
        </el-dialog>

    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- import axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- vue实例脚本 -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                commodityListData: [], //商品表格数据
                dialogTableVisible: false,         // 决定商品表格是否可见
                roomIdList: [],
                dialogAddCommodityFormVisible: false,// 控制添加商品的对话框是否可见
                currentRoomId: 0,//当前卡片房间的房号
                addCommodityInfo: {  //存储 添加商品的信息
                    commName: '',    //商品名称
                    commPrice: 0,    //商品价格
                    commNum: 0       //商品数量
                }
            },
            methods: {
                //展示指定房间的商品表格
                showTable(roomId) {

                    //清空之前的表格数据
                    this.commodityListData=[];
                    //发送ajax请求获取指定房间的商品清单
                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                    axios.get('http://localhost:8080/commodities?roomId=' + roomId)
                        .then(function (response) {
                            //更新表格绑定数据
                            self.commodityListData = response.data;
                        })
                        .catch(function (error) {
                            self.$message.error('请检查网络连接');
                        })
                    //更新当前房号
                    this.currentRoomId = roomId;

                    //显示表格
                    this.dialogTableVisible = true;
                },
                //添加一个商品
                addCommodity() {
                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                    let newCommodity = {  //添加用户的表单
                        commName: '',    //商品名称
                        commPrice: 0,    //商品价格
                        commNum: 0       //商品数量
                    };
                    newCommodity.commName = this.addCommodityInfo.commName;
                    newCommodity.commPrice = this.addCommodityInfo.commPrice;
                    newCommodity.commNum = this.addCommodityInfo.commNum;

                    // 发送ajax 调用添加商品的API
                    axios.post('http://localhost:8080/commodities', {
                        commName: newCommodity.commName,    //商品名称
                        commPrice: newCommodity.commPrice,  //商品价格
                        commNum: newCommodity.commNum,      //商品数量
                        roomID: self.currentRoomId          //房号
                    })
                        .then(function (response) {
                            //在axios里面用self来引用vue实例，因为在axios作用域内this不是vue实例，而是全局对象window
                            self.commodityListData.push(newCommodity);
                            self.dialogAddCommodityFormVisible = false;

                            self.$notify({
                                title: '成功',
                                message: '新添加了一种商品',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                //删除一个商品
                deleteCommodity(index) {
                    this.$confirm('此操作将永久删除此商品信息, 是否继续?', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面

                        let commName = this.commodityListData[index].commName;
                        //中文字符串要转换成url格式
                        let roomId = this.currentRoomId;
                        //发送ajax请求 调用根据房号和商品名称删除商品的API
                        axios.delete(encodeURI('http://localhost:8080/commodities?commName=' + commName + '&roomId=' + roomId))
                            .then(function (response) {
                                // 数组删除某些元素语法：objArray.splice(index,cnt) :删除从第index个元素开始的cnt个元素
                                self.commodityListData.splice(index, 1);
                                self.$notify({
                                    title: '成功',
                                    message: '删除了一个商品',
                                    type: 'success'
                                });
                            }).catch(() => {
                            });
                    })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        })
                        .finally(function () {
                            // always executed
                        });
                },
            },
            // 生命周期函数created:在vue实例加载完成后，发送ajax请求，用返回的数据填充页面
            created: function () {
                // 发送ajax数据获取房间号列表数据
                let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                axios.get('http://localhost:8080/rooms/all-room-Id')
                    .then(function (response) {
                        self.roomIdList = response.data;//通过self间接访问vue实例
                    })
                    .catch(function (error) {
                        // handle error
                        // console.log(error);
                        self.$message.error('请检查网络连接');
                    })
                    .finally(function () {
                        // always executed
                    });
            }
        })
    </script>
</body>

</html>